<template>
	<view class="map-box">
		<view>{{ currentAdress }}</view>
		<view id="more-oprate" style="display: flex; align-items: center; padding: 16rpx;">
			<view class="city-name">搜索小二：</view>
			<view class="picker-box">
				<input type="text" placeholder="请搜索地址" v-model="inpAddress" @input="serch" />
			</view>
		</view>
		<view class="map-content-box">
			<map id="maps" class="tui-maps" :longitude="longitude" :latitude="latitude" :scale="15" show-location
				@regionchange="regionchange" :style="{'width':windowWidth+'px','height':'800rpx'}" :markers="markers">
				<cover-view slot="callout">
					<block v-for="(item, index) in customCalloutMarkerIds" :key="index" @click="chooseXiaoEr(index)">
						<!-- 覆盖在原本的节点上面 -->
						<cover-view class="customCallout" :marker-id="item">
							<!-- 覆盖正在原本节点的图片 -->
							<cover-image :src="markers[index].iconPath"></cover-image>
						</cover-view>
					</block>
				</cover-view>
			</map>
		</view>
		<view class="gps-body">
			<scroll-view scroll-y="true" :scroll-top="scrollTop" scroll-with-animation="true">
				<view class="goods-box" v-for="(item, index) in goodsList" :key="index">
					<image :src="item.img" class="goods-img"></image>
					<view class="goods-msg">
						<view class="name">{{ item.name }}</view>
						<view class="price-box">
							<view>
								<view class="shi-chang-jia">市场价：{{ item.shichang }}</view>
								<view class="shui-piao">{{ item.shuipiao }}水票</view>
							</view>
							<view class="yi-shou">已售{{ item.num }}件</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="but">
				
			</view>
		</view>
	</view>
</template>
 
<script>
	export default {
		data() {
			return {
				currentAdress: '',
				goodsList: [{
					name: '北京饭店百年珍藏酱香型白酒53度',
					shichang: '123',
					shuipiao: '388888',
					num: '213',
					img: '../../static/images/icon_good_s.png'
				}],
				customCalloutMarkerIds: [1, 2],
				qqmapsdk: null,
				markers: [
					{
						id: 1,
						iconPath: "../../static/images/icon_good_s.png",
						latitude: 37.51208,
						longitude: 121.44647,
						width: 20,  //图片显示宽度
						height: 20  //图片显示高度
					},
					{
						id: 2,
						iconPath: "../../static/images/icon_good_s.png",
						latitude: 37.51208,
						longitude: 121.43480,
						width: 20,  //图片显示宽度`
						height: 20  //图片显示高度
					},
				],
				longitude: null,
				latitude: null,
				windowWidth: 0,
				scrollTop: 0,
				current: 0,
				address: {},
				mapContext: null,
				inpAddress: "",
			}
		},
		//第一次初始化用户位置信息
		onLoad() {
			this.initMap();
			try {
				var th_is = this;
				th_is.mapContext = uni.createMapContext('maps')
				const res = uni.getSystemInfoSync();
				th_is.windowWidth = res.windowWidth;
				uni.showLoading({
					title: '正在获取定位中',
				});
				uni.getLocation({
					type: 'gcj02',
					isHighAccuracy: 'true',
					geocode: 'true',
					success: (res) => {
						th_is.longitude = res.longitude;
						th_is.latitude = res.latitude;
						uni.hideLoading();
						th_is.getAddress(th_is.latitude, th_is.longitude);
					}
				})
			} catch (e) {
				// error
			}
		},
		methods: {
			chooseXiaoEr(i) {
				console.log(i)
			},
			initMap() {
				const QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js')
				this.qqmapsdk = new QQMapWX({
					key: 'A34BZ-FT5K6-DTPSC-E6RVP-JOHHV-WQB27'
				})
				const mapContext = uni.createMapContext('map', this);
				mapContext.addMarkers({
					markers: this.markers
				})
			},
			//每移动一次获取周围地址
			regionchange(e) {
				var th_is = this;
				if (e.type == "end") {
					th_is.longitude = e.detail.centerLocation.longitude;
					th_is.latitude = e.detail.centerLocation.latitude;
					th_is.getAddress(th_is.latitude, th_is.longitude);
				}
			},
			//获取附近位置信息
			getAddress(longitude, latitude) {
				let location = [longitude, latitude]
				let StringLocation = location.toString();
				var th_is = this;
				this.qqmapsdk.reverseGeocoder({
					location: StringLocation,
					get_poi: 1,
					poi_options: 'policy=1;page_size=20;page_index=1',
					success: res => {
						this.currentAdress = res.result.address
					},
					fail: err => {
						uni.showToast({
							title: err.message,
							icon: 'none',
							duration: 3000
						})
					}
				})
			},
			serch() {
			},
		}
	}
</script>
 
<style scoped lang="scss">
	.city-name {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 400;
		padding-bottom: 20rpx;
	}
 
	.picker-box {
		width: 75%;
		padding-bottom: 20rpx;
	}
 
	input {
		width: 100%;
		border-radius: 10rpx;
		border: 2rpx solid #EBEEF5;
		padding: 14rpx 20rpx;
	}
 
	.map-box {
		padding-bottom: constant(safe-area-inset-bottom); // 底部安全区
		padding-bottom: env(safe-area-inset-bottom); // 底部安全区
		box-sizing: content-box;
	}
 
	.tui-maps {
		width: 100%;
		height: 600rpx;
		// position: relative;
	}
 
	.cover-image {
		width: 50rpx;
		height: 62rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
 
	.tip {
		font-size: 20rpx;
		color: #b6b6b6;
		line-height: 42rpx;
		padding: 0 20rpx;
		position: absolute;
		left: 50%;
		bottom: 30rpx;
		box-shadow: 0px 1px 10px 1px rgba(153, 153, 153, 0.34);
		background-color: #fff;
		border-radius: 4px;
		transform: translateX(-50%);
	}
 
	.gps-body {
		position: relative;
		width: 100%;
		background-color: #FFFFFF;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		margin-top: -50rpx;
		z-index: 999;
		background-color: #F7F8FA;
		padding: 20rpx;
 
		.gps-lists {
			width: 98%;
			height: 100rpx;
			margin: 0px auto;
			border: 1px solid #f9f9f9;
 
			.gps-flex {
				display: flex;
				justify-content: space-between;
			}
 
			.gps-flex /deep/ .uni-radio-input {
				width: 40rpx;
				height: 40rpx;
			}
 
			.gps-title {
				padding-left: 10rpx;
				display: block;
				padding-top: 15rpx;
			}
 
			.gps-view {
				width: 70%;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				padding-left: 10rpx;
				color: #b6b6b6;
				font-size: 25rpx;
				margin-top: 15rpx;
			}
		}
	}
 
	.but {
		margin-top: 32rpx;
		padding: 0 32rpx;
	}
	
	.content-image {
		min-width: 0;
		min-height: 0;
		width: 20rpx;
		height: 20rpx;
	}
	.goods-box {
		display: flex;
		padding: 20rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
	}
	.goods-img {
		width: 160rpx;
		height: 160rpx;
	}
	.goods-msg {
		position: relative;
		width: 480rpx;
		margin-left: 20rpx;
		.name {
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
		}
	}
	.price-box {
		position: absolute;
		bottom: 0;
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		width: 100%;
	}
	.shi-chang-jia {
		font-weight: 400;
		font-size: 26rpx;
		color: #999999;
	}
	.shui-piao {
		font-weight: 400;
		font-size: 32rpx;
		color: #C92121;
	}
	.yi-shou {
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
	}
	.map-content-box {
		position: relative;
	}
</style>